<!--垂直弹幕-->
<template>
  <div class="bullet">
    <transition
      name="bullet"
      @after-enter="afterEnter"
      @after-leave="afterLeave"
    >
      <div
        v-show="isShowBullet"
        class="bullet-screen"
        v-bind:style="{ top: top, left: left }"
      >
        <span class="txt">{{ bulletList[0] }}</span>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isShowBullet: !1,
      bulletInterval: 1,
      bulletList: [],
      timer: null,
      afterTimer: null
    }
  },
  props: {
    bullets: {
      type: Object
    },
    paused: {
      type: Boolean,
      default: !1
    },
    top: { type: String },
    left: { type: String }
  },
  methods: {
    bulletEnter (el, done) {
      el.classList.add('bullet-enter-active');
      setTimeout(() => {
        this.isShowBullet = !1;
        el.classList.remove('bullet-enter-active');
        setTimeout(() => {
          this.isShowBullet = !0;
        }, 500);
      }, 2000);
    },
    afterEnter () {
      this.afterTimer = setTimeout(() => {
        this.isShowBullet = !1;
      }, 2000);
    },
    afterLeave () {
      let target = this.bulletList.shift();
      this.bulletList.push(target)
      if (this.bulletList.length <= 0 || this.paused) {
        return;
      }
      this.showBullet();
    },
    showBullet () {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.isShowBullet = !0;
      }, this.bulletInterval * 1000);
    }
  },
  watch: {
    bullets: {
      handler (val) {
        this.bulletInterval = val.frequency;
        this.bulletList = val.msglist;
        if (this.bulletList.length > 0) {
          this.showBullet();
        }
      },
      immediate: true,
    },
    paused (isPaused) {
      if (isPaused) {
        this.isShowBullet = !1;
        clearTimeout(this.timer);
        clearTimeout(this.afterTimer);
      } else {
        this.showBullet();
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.bullet {
  height: 100%;
  position: relative;
  overflow: hidden;
  .txt {
    font-size: 28px;
    letter-spacing: 2px;
  }
}
.bullet-screen {
  position: absolute;
  right: 12px;
  bottom: 12px;
  height: 48px;
  line-height: 48px;
  padding: 0 12px;
  border-radius: 2px;
  color: #fff;
  text-align: center;
  background-image: linear-gradient(90deg, #ff8c00 0, #ff5400 100%);
  z-index: 2000;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.8;
}
.bullet-enter-active {
  opacity: 0.8;
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-in-out;
}
.bullet-enter {
  opacity: 0;
  transform: translate3d(0, 150%, 0);
}
.bullet-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.bullet-leave-to {
  opacity: 0;
  transform: translate3d(0, -100%, 0);
}
@keyframes bullet {
  0% {
    opacity: 0;
    transform: translate3d(0, 150%, 0);
  }
  25% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  75% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
}
</style>